<!-- 员工管理 vue -->
<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="审批人">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
                <el-select v-model="formInline.region" placeholder="活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item><el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        </el-form>
        <div>
            <el-form :inline="true" class="demo-form-inline">
                <el-button type="primary" @click="openDialog('addRoleDialog')">添加角色</el-button>
            </el-form>
        </div>

        <div>
            <el-table :data="tableList.roleList" style="width: 100%">
                <el-table-column prop="id" label="id"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column label="操作">
                    <template scope="scope">
                        <el-button size="small" type="info" @click="editRow(scope.$index,scope.row,'roleActionEditDialog')">相关权限</el-button>
                        <el-button size="small" type="danger" icon="delete" @click="editRow(scope.$index, scope.row,'delRoleDialog')"></el-button>

                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 添加角色 -->
        <el-dialog title="添加角色" :visible.sync="dialog.addRoleDialog.open">
            <el-form :model="form.addRoleFormInfo">

                <el-form-item label="角色名" :label-width="formLabelWidth" >
                    <el-input v-model="form.addRoleFormInfo.name" :label-width="formLabelWidth"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog('addRoleDialog')">取 消</el-button>
                <el-button type="primary" @click="dialogBtnOk('addRoleDialog')">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 角色选择权限 -->
        <el-dialog title="角色选择权限" :visible.sync="dialog.roleActionEditDialog.open" v-if="dialog.roleActionEditDialog.open">
            <roleActionEditDialog :roleId="rowSelectedRoleId" @closeDialog="closeDialog('roleActionEditDialog')"></roleActionEditDialog>
        </el-dialog>


        <!-- 角色删除 -->
        <el-dialog title="删除提示" :visible.sync="dialog.delRoleDialog.open" size="tiny">
            <span>确定要删除此数据吗?</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeDialog('delRoleDialog')">取 消</el-button>
		    <el-button type="primary" @click="dialogBtnOk('delRoleDialog')">确 定</el-button>
		  </span>
        </el-dialog>



    </div>
</template>
<script>
    import _http from '../common/http.vue'
    import roleActionEditDialog from './roleActionEditDialog.vue'

    export default{
        components:{roleActionEditDialog},
        data(){
            return {
                tableList:{
                    roleList:[]
                },
                dialog:{
                    roleActionEditDialog:{
                        open:false
                    },
                    addRoleDialog:{
                        open:false
                    },
                    delRoleDialog:{
                        open:false
                    }
                },
                rowSelectedRoleId:0,
                form:{
                    addRoleFormInfo:{
                        name:''
                    },
                    delRoleFormInfo:{
                        id:0
                    }
                },
                formLabelWidth:'120px',

            }
        },
        mounted(){
            this.getRoleList()
        },
        methods:{
//		获取角色列表
            getRoleList(){
                _http.axiosRequest(this,'roleList',{type:'form'},(res)=>{
                    this.tableList.roleList = res.data
            })
            },
            closeDialog(dialog){
                this.dialog[dialog].open = false
            },
            openDialog(dialog){
                this.dialog[dialog].open = true
            },
//		编辑行
            editRow(index,row,dialog){
                if (dialog == 'roleActionEditDialog') {
                    this.rowSelectedRoleId = row.id
                }else if(dialog == 'delRoleDialog'){
                    this.form.delRoleFormInfo.id = row.id
                }
                this.openDialog(dialog)
            },
            dialogBtnOk(dialog){
                if (dialog == 'addRoleDialog') {
                    this.addRole(dialog)
                }else if(dialog == 'delRoleDialog'){
                    this.delRole(dialog)
                }
            },
//		添加角色
            addRole(dialog){
                _http.axiosRequest(this,'addRole',{form:this.form.addRoleFormInfo},(res)=>{
                    if(_http.apiResult(this,res.data)){
                    this.getRoleList()
                    this.closeDialog(dialog)
                }
            })
            },

//		删除角色
            delRole(dialog){
                _http.axiosRequest(this,'delRole',{roleId:this.form.delRoleFormInfo.id},(res)=>{
                    if(_http.apiResult(this,res.data)){
                    this.getRoleList()
                    this.closeDialog(dialog)
                }
            })
            },
        }
    }
</script>